<template>
    <div class="users">
        <div class="head">
           <img src="@/assets/user_bg.png" class="avatar">
           <div class="setting">
              <img src="@/assets/setting.png">
           </div>
           <div class="info">
              <img src="@/assets/toximg.png" class="avatar">
              <div class="content">
                 <div class="name">
                    iuhnehc
                    <div class="tag">免费版</div>
                 </div>
                 <div class="id">ID: 1234567890</div>
              </div>
           </div>
            <div class="vip_card">
              <img src="@/assets/vip_bg1.png" />
              <div class="content">
                  <div class="user_data">
                      <div class="name">会员中心<img src="@/assets/vip.png" alt=""></div>
                      <div class="dsc">享更多大数据权益</div>
                  </div>
                  <div class="open">立即开通</div>
              </div>
            </div>
        </div>
        <div class="tabs">
          <router-link custom v-for="item in tabs.list" :to="item.path" v-slot="{ navigate }">
            <div class="item" @click="navigate">
                <div>{{ item.label }}</div>
                <div>{{ item.nums }}</div>
            </div>
          </router-link>         
        </div>
        <div class="list">
           <div class="item" v-for="item in itemList">
             <img :src="item.icon">{{ item.label }}
           </div>        
        </div>
        <div class="logout">
        <van-button :loading="loading" loading-text="退出登录中..." round color="#FBA2A2" @click="logout">{{ getToken() ? '退出登录' : '登录'}}</van-button>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, getCurrentInstance } from 'vue'
import OrderIcon from '@/assets/order.png'
import BagIcon from '@/assets/bag.png'
import BullIcon from '@/assets/bull.png'
import ShopIcon from '@/assets/recommend.png'
import WalletIcon from '@/assets/wallet.png'
import InviteIcon from '@/assets/invite.png'
import { getToken } from '@/utils/auth'
import { useRouter } from 'vue-router'
import { Logout } from '@/api'
import { removeToken } from '@/utils/auth'

const router = useRouter()
const loading = ref(false)
const { proxy } = getCurrentInstance()

const itemList = [
    { label: '我的订单', icon: OrderIcon, path: 'favorite' },
    { label: '我的钱包', icon: WalletIcon,path: 'favorite' },
    { label: '我的红包', icon: BagIcon, path: 'favorite' },
    { label: '邀请奖励', icon: InviteIcon, path: 'favorite' },
    { label: '小店推荐', icon: ShopIcon, path: 'favorite' },
    { label: '我是牛人', icon: BullIcon, path: 'favorite' },
]

const tabs = reactive({
    list: [
        { label: '关注', nums: 12, path: '/my/favorite' },
        { label: '粉丝', nums: 15, path: '/users/favorite' },
        { label: '收藏', nums: 13, path: '/users/favorite' },
        { label: '浏览记录', nums: 15, path: '/users/favorite' }
    ]
})

const logout = () => {
    if (getToken()) {
        loading.value = true
        Logout().then(res => {
            if (res.code === 200) {
                loading.value = false
                removeToken()
                proxy.$toast({
                    message: res.data,
                    forbidClick: true,
                    onClose: () => {
                        router.push('/login')
                    }
                })
            }
        })
    } else {
        router.push('/login')
    }
}

</script>

<style lang="scss" scoped>
.users {
    background-color:#f9f8f8;
    .head {
        position: relative;
        display: flex;
        align-items: center;
        img {
            display: block;
            &.avatar {
                width: 100%;
            }
        }
        & > .info, .setting, .vip_card { position: absolute; }
        .setting {
            top: 28px;
            right: 28px;
            img {
                width: 22px;
                height: 22px;
                display: block;
            }
        }
        .vip_card {
            height: 105px;
            left: 32px;
            right: 32px;
            bottom: 0;
            transform:translate(0, 50%);
            font-size: 12px;
            color: white;
            .content {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 30px;
                right: 30px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                & > .user_data {
                    display: flex;
                    flex-direction: column;
                    .name {
                        font-size: 14px;
                        margin-bottom: 10px;
                        display: flex;
                        align-items: center;
                        img {
                            display: block;
                            width: 18px;
                            height: 18px;
                            margin-left: 5px;
                        }
                    }
                }
                .open {
                    background-color: #61ba74;
                    padding: 6px 13px;
                    border-radius: 5px;
                    font-size: 12px;
                }
            }
            img {
                display: block;
                width: 100%;
            }
        }
        .info {
            display: flex;
            align-items: center;
            top: 30px;
            left: 40px;
            right: 40px;
            & > img {
                width: 82px;
                height: 82px;
            }
            .content {
                margin-left: 8px;
                color: white;
                font-size: 16px;
                .name {
                    display: flex;
                    align-items: center;
                    margin-bottom: 8px;
                    .tag {
                        font-size: 12px;
                        background-color: #02BF6D;
                        margin-left: 5px;
                        padding: 3px;
                    }
                }
                .id {
                    font-size: 14px;
                }
            }
        }
    }
    .tabs {
        font-size: 14px;
        display: flex;
        margin: 55px 30px 13px;
        padding: 0;
        .item {
            flex: 1;
            display: flex;
            flex-wrap: nowrap;
            & > div {
                &:first-of-type {
                    margin-right: 5px;
                }                
            }
        }
    }
    .list {
        .item {
            padding: 6px 40px;
            background-color: white;
            font-size: 14px;
            display: flex;
            align-items: center;
            position: relative;
            &::after {
                position: absolute;
                content: '';
                width: 8px;
                height: 8px;
                border-top:2px solid #b6b6b6;
                border-right: 2px solid #b6b6b6;
                top: 50%;
                right: 40px;
                transform: translate(0, -50%) rotate(45deg);
            }            
            img {
                width: 33px;
                height: 33px;
                display: block;
                margin-right: 5px;
            }
            &:not(:last-of-type) {
                margin-bottom: 5px;
            }
        }
    }
    .logout {
        display: flex;
        justify-content: center;
        padding: 40px;
        .van-button {
            padding: 13px 40px;          
        }
    }
}    
</style>